<template>
	<div>
		<!-- 签收提示窗 -->
		<uni-popup ref="signDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认签收" title="运单签收"
				@confirm="signDialogConfirm" :before-close="true" @close="closeDialog('signDialog')">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 300px;">
					<uni-forms ref="form_sign" :modelValue="formData_sign" :rules="rules_sign" labelWidth="75px">
						<uni-forms-item label="签收人" name="signer" required>
							<uni-easyinput type="text" v-model="formData_sign.signer" placeholder="请输入签收人" />
						</uni-forms-item>
						<uni-forms-item label="联系电话" name="signedPhone" required>
							<uni-easyinput type="number" v-model="formData_sign.signedPhone" placeholder="请输入联系电话" />
						</uni-forms-item>
						<uni-forms-item label="身份证号" name="signedIdcard" required>
							<uni-easyinput type="text" v-model="formData_sign.signedIdcard" placeholder="请输入身份证号" />
						</uni-forms-item>
						<uni-forms-item label="代理签收" name="signedAgentFlag">
							<view style="display: flex;">
								<checkbox-group style="padding-top: 8px;" @change="checkboxChange">
									<label>
										<checkbox value="1" :checked="formData_sign.signedAgentFlag=='1'" />
									</label>
								</checkbox-group>
							</view>
						</uni-forms-item>
						<uni-forms-item label="签收类型" name="signedType" required>
							<uni-data-select :clear="false" v-model="formData_sign.signedType" :localdata="signedType"
								style="background-color: white;" />
						</uni-forms-item>
						<uni-forms-item label="签收时间" name="updateTime" required>
							<uni-datetime-picker type="datetime" v-model="formData_sign.updateTime" />
						</uni-forms-item>
						<uni-forms-item label="回单附件">
							<!-- <myfilepicker  @clickFile="clickFile_signedAttach" limit="3" :imageStyles="imageStyles"  :value="fileList_signedAttach" file-extname="png,jpg,jpeg" file-mediatype="image" @select="selectFile_signedAttach"  @delete='deleteFile_signedAttach' @success="success_signedAttach" @fail="fail_signedAttach"
								title="*点击上传回单，支持常规图片、PDF、DOC、XLS格式，最多可上传3个附件*"><uni-icons type="cloud-upload" size="18"></uni-icons>回单照片</myfilepicker> -->
							<myfilepicker :limit="'3'" :imageStyles="imageStyles" :fileIdString="formData_sign.signedAttach" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"  @transFileIdString="getFileIdString_signedAttach"
									:title="'*点击上传回单，支持png/jpg/jpeg，最多可上传3个附件*'"><uni-icons type="cloud-upload" size="18"></uni-icons>回单照片</myfilepicker>
						</uni-forms-item>
						<uni-forms-item label="备注">
							<uni-easyinput type="textarea" v-model="formData_sign.signedRemark" placeholder="签收相关备注说明" />
						</uni-forms-item>
					</uni-forms>
					<view style="height: 50px;"></view>
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 取消签收提示窗 -->
		<uni-popup ref="cancelSignDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title="取消签收"
				@confirm="cancelSignDialogConfirm">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 300px;">
					<uni-forms ref="form_sign" :modelValue="formData_sign" :rules="rules_sign" labelWidth="75px">
						<uni-forms-item label="签收人" name="signer" required>
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData_sign.signer}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="联系电话" name="signedPhone" required>
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData_sign.signedPhone}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="身份证号" name="signedIdcard" required>
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData_sign.signedIdcard}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="代理签收" name="signedAgentFlag">
							<view style="display: flex;">
								<checkbox-group style="padding-top: 8px;">
									<label>
										<checkbox value="1" disabled :checked="formData_sign.signedAgentFlag=='1'" />
									</label>
								</checkbox-group>
							</view>
						</uni-forms-item>
						<uni-forms-item label="签收类型" name="signedType" required>
							<view style="display: flex;align-items: center;height: 36px;">
								{{signedType_[formData_sign.signedType]}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="签收时间" name="updateTime" required>
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData_sign.updateTime}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="回单附件">
							<!-- <myfilepicker :del-icon="false" readonly  limit="3" :imageStyles="imageStyles"  :value="fileList_signedAttach" file-extname="png,jpg,jpeg" file-mediatype="image" 
								title="*点击上传回单，支持常规图片、PDF、DOC、XLS格式，最多可上传3个附件*"><uni-icons type="cloud-upload" size="18"></uni-icons>回单照片</myfilepicker> -->
							<myfilepicker :limit="'3'" :readonly="true" :imageStyles="imageStyles" :fileIdString="formData_sign.signedAttach" :fileExtname="'png,jpg,jpeg'" :fileMediatype="'image'"></myfilepicker>
						</uni-forms-item>
						<uni-forms-item label="备注">
							<view style="display: flex;align-items: center;height: 36px;">
								{{formData_sign.signedRemark||''}}
							</view>
						</uni-forms-item>
					</uni-forms>
					<view style="height: 50px;"></view>
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	import {
		signWaybill,
		deleteSignWaybill,
	} from '@/api/system/waybill.js'
	import {getDicts} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	export default {
		components: {
			myfilepicker
		},
		props: {
			data: {
				type: Object,
				default: {}
			},
			waybillId:{
				type: String,
				default:''
			}
		},
		data() {
			return {
				formData:{},
				//签收
				formData_sign:{
					signer:'',
					signedPhone:'',
					signedIdcard:'',
					signedAgentFlag:'',
					signedType:'1',
					updateTime:'',
					signedAttach:'',
					signedRemark:'',
					waybillId:''
				},
				// 校验规则->签收
				rules_sign: {
					signer: {
						rules: [{
							required: true,
							errorMessage: '请输入签收人',
						}]
					},
					signedPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						},
						{
						    pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
						    errorMessage: '电话格式不正确'
						}
						]
					},
					signedIdcard: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						},
						{
						    pattern: '(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{2}$)',
						    errorMessage: "请输入正确的身份证号"
						}
						]
					},
					signedType: {
						rules: [{
							required: true,
							errorMessage: '请选择签收类型',
						}]
					},
					updateTime:{
						rules: [{
							required: true,
							errorMessage: '请选择签收时间',
						}]
					},
				},
				imageStyles: {
					width: '100%',
					height: 150,
					border: {
						radius: '4px'
					}
				},
				//发车时间
				getNowTime:'',
				//下拉框 ->签收类型
				signedType:[],
				signedType_:[]
			}
		},
		watch: {
			data: {
			　　handler(newValue, oldValue) {
			　　　	this.formData=newValue
			　　},
			　　deep: true
			},
		},
		created() {
			//下拉框->签收类型
			getDicts('signed_type').then(res=>{
				this.signedType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
				res.data.forEach(item=>{
					this.signedType_[item.dictValue]=item.dictLabel
				})
			})
		},
		methods: {
			//关闭弹窗
			closeDialog(name){
				this.$refs[name].close()
			},
			//获取当前时间
			getNowDateTime(){
				const date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				// var hour = date.getHours()<10?('0'+date.getHours()):date.getHours();
				// var minute = date.getMinutes()<10?('0'+date.getMinutes()):date.getMinutes();
				// var second = date.getSeconds()<10?('0'+date.getSeconds()):date.getSeconds();
				// this.getNowTime=year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
				var hour = date.getHours()<10?('0'+date.getHours()):date.getHours();
				var minute = date.getMinutes()<10?('0'+date.getMinutes()):date.getMinutes();
				var second = date.getSeconds()<10?('0'+date.getSeconds()):date.getSeconds();
				this.getNowTime=year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
			},
			//接收文件传递的id字符串集合
			getFileIdString_signedAttach(fileIds){
				this.formData_sign.signedAttach=fileIds
			},
			//签收
			signIn(){
				if(this.formData.unLoadId=='0'){
					uni.showToast({
						icon:'none',
						title:'请先进行卸车操作'
					})
					return
				}
				this.formData_sign={
					signer:this.formData.deliveryContacts,
					signedPhone:this.formData.deliveryContactTel,
					signedIdcard:'',
					signedAgentFlag:'',
					signedType:'1',
					updateTime:'',
					signedAttach:'',
					signedRemark:'',
					waybillId:''
				}
				this.getNowDateTime()
				//签收时间
				this.formData_sign.updateTime=this.getNowTime;
				
				this.$refs.signDialog.open()
			},
			//确认签收
			signDialogConfirm(){
				this.$refs.form_sign.validate().then(res => {
					uni.showLoading({
						title: '正在签收...',
					})
					
					//文件 (签收回单)
					// if(!this.formData_sign.signedAttach)
					// {
					// 	uni.showToast({
					// 		icon:'none',
					// 		title:'请至少上传1份回单'
					// 	})
					// 	return
					// }
					
					this.formData_sign.signedStatus='1'; //待签收	
					this.formData_sign.waybillId=this.waybillId
					//签收完成
					signWaybill(this.formData_sign).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '签收成功',
								icon: 'none'
							})
							this.$refs.signDialog.close()
							this.$parent.init()  //调用父组件的init函数，重新加载数据
							//this.$forceUpdate(); //重新加载数据
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}	
					})
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
				
			},
			//取消签收
			cancelSignIn(){
				this.formData_sign=this.formData.signVo
				this.formData_sign.updateTime=this.formData.signVo.createTime
				this.$refs.cancelSignDialog.open()
			},
			//确认取消签收
			cancelSignDialogConfirm(){
				uni.showLoading({
					title: '正在取消签收...',
				})
				deleteSignWaybill(this.formData.signVo.signedId).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						uni.showToast({
							title: '取消签收成功',
							icon: 'none'
						})
						this.$parent.init()  //调用父组件的init函数，重新加载数据
						//this.$forceUpdate(); //重新加载数据
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}	
				})
			},
			//代理签收
			checkboxChange(e){
				if(e.detail.value.length!==0)
				{
					this.formData_sign.signedAgentFlag='1';  //代理
				}
				else
				{
					this.formData_sign.signedAgentFlag='0';  //默认值
				}
			},
		},
		
	}
</script>

<style scoped>
::v-deep .file-title{
	    font-size: 12px;
	    color: #333;
	}
</style>